<template>
  <main>
    <!-- 标题 -->
     <h1 style="text-align: center;">首页</h1>
    <!-- 导航区 -->
    <div style="text-align: center;">
    
    </div>
    <!-- 内容呈现 -->
    <div class="custom-content">
      <p>钱：{{ money }}</p>
      <button @click="addMoney">加钱</button>
    </div>
  </main>
</template>

<script lang="ts">
export default {
  name: 'App'
}
</script>

<script setup lang="ts">
import { customRef } from 'vue';

let customValue = 0 //定义必要数据
let money = customRef((track,trigger) => {
  return{
    get() { 
      track() //持续关注数据，trigger()告诉数据变化了就更新
      return customValue
    },
    set(value) { 
      customValue = value
      trigger() //通知vue数据变化了，需要更新
    }
  }
})

function addMoney() { 
  money.value +=1
}
</script>

<style lang="css">
.custom-a {
  display: inline-block;
  width: 50px;
  height: 20px;
  border: 1px solid black;
  margin-right: 50px;
  text-align: center;
  background-color: aqua;
}

.custom-a a {
  text-decoration: none;
  display: block;
  width: 50px;
  height: 20px;
}

.custom-content {

  margin: 0 auto;
  margin-top: 20px;
  border: 1px solid black;
  height: 700px;
  width: 1000px;
}

.custom-active {
  background-color: red;
}
</style>
